<template>
    <div class="details">
        <Editor
            class="editos"
            :value="innerContext"
            :plugins="plugins"
            :locale="zhHans"
            @change="changeContext"
        />
    </div>
</template>

<script>
import { Editor, Viewer } from "@bytemd/vue";

import gfm from "@bytemd/plugin-gfm";
import highlight from "@bytemd/plugin-highlight";
import breaks from "@bytemd/plugin-breaks";
import footnotes from "@bytemd/plugin-footnotes";
import frontmatter from "@bytemd/plugin-frontmatter";
import gemoji from "@bytemd/plugin-gemoji";
import mediumZoom from "@bytemd/plugin-medium-zoom";
import mermaid from "@bytemd/plugin-mermaid";
import mathssr from "@bytemd/plugin-math-ssr";
import { getProcessor } from "bytemd";
import zhHans from "bytemd/locales/zh_Hans.json";
import gfmLocal from "@bytemd/plugin-gfm/locales/zh_Hans.json";
import mathLocal from "@bytemd/plugin-math/locales/zh_Hans.json";
import mermaidLocal from "@bytemd/plugin-mermaid/locales/zh_Hans.json";

import "highlight.js/styles/vs.css";
import "bytemd/dist/index.css";
import "katex/dist/katex.css";
import "juejin-markdown-themes/dist/github.css";

const plugins = [
    gfm({ locale: gfmLocal }),
    breaks(),
    highlight(),
    mermaid({ locale: mermaidLocal }),
    frontmatter(),
    mathssr({ locale: mathLocal }),
    footnotes(),
    gemoji(),
];
export default {
    name: "MdEditor",
    components: { Editor, Viewer },
    props: {
        context: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            plugins,
            zhHans,
            innerContext: this.context,
        };
    },
    watch: {
        context(newValue) {
            this.innerContext = newValue;
            if (this.innerContext === "") {
                const spans = document.querySelectorAll(
                    "pre.codeMirror-code > span"
                );
                spans.forEach((span) => {});
            }
        },
    },
    methods: {
        changeContext(v) {
            this.innerContext = v;
            this.$emit("update:context", v);
        },
    },
};
</script>

<style>
</style>